<template lang="pug">
  transition(name="packetbounce")
    .taobao-pswd-base(v-show="taobaoPswdShow")
      .close(@click="close()")
        img(:src="closeIcon")
      .taobao-board
        .pic
          img(:src="good.pictUrl")
        .infos
          .inner
            | 【商品】{{good.title}}
            br
            | 【原价】{{good.zkPrice}}元
            br
            | 【券后价】{{good.discount_price}}元
            br
            | {{good.tpwd}}
          br
          button.copy-pswd(v-clipboard="good.tpwd", @success="handleSuccess") {{state}}
</template>
<script>
import closeIcon from '../assets/packet/close.svg'

export default {
  name: 'TaobaoPswd',
  props: ['good'],
  data () {
    return {
      closeIcon: closeIcon,
      taobaoPswdShow: false,
      state: '一键复制'
    }
  },
  methods: {
    open () {
      this.state = '一键复制'
      this.taobaoPswdShow = true
    },
    close () {
      this.taobaoPswdShow = false
    },
    handleSuccess () {
      this.state = '已复制到粘贴板'
    }
  }
}
</script>
<style lang="sass">
@import '../styles/color.sass';
.taobao-pswd-base
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 900
  background: $alpha-black
  display: flex
  flex-direction: column
  justify-content: center
  align-items: stretch
  padding: 15px
  .close
    width: 40px
    height: 40px
    padding: 5px
    border-radius: 50%
    background: $alpha-black
    position: fixed
    right: 7%
    top: 20px
    img
      width: 30px
      height: 30px
  .taobao-board
    width: 100%
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    .pic
      border-radius: 50%
      border: 3px $white solid
      width: 60px
      height: 60px
      overflow: hidden
      margin-bottom: -25px
      z-index: 1100
      background: $white
      position: relative
      img
        width: 100%
        height: 100%
    .infos
      z-index: 1000
      position: relative
      background: $white
      border-radius: 6px
      padding: 50px 15px 30px 15px
      width: 100%
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      .inner
        background: $orange-bg
        border: $orange 2px dashed
        border-radius: 4px
        padding: 10px
        color: $red
        line-height: 2em
      button.copy-pswd
        background: $red
        color: $white
        border-radius: 15px
        height: 30px
        padding: 2px 15px
        border: none
        &:focus
          outline: none
          box-shadow: none
</style>
